<template>
  <div>
    <div class="search">
      <el-form inline label-width="80px" @keyup.enter.native="searchByCondition">
        <el-form-item label="用户">
          <el-input v-model="params.employeeName" readonly class="search-item">
            <el-button slot="append" icon="el-icon-search" @click="userRefVisible=true"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="searchByCondition">查询</el-button>
          <el-button type="primary" size="small" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="data" v-loading="loading">
      <el-table  :data="data.records">
        <el-table-column prop="username" label="用户名" width="150"> </el-table-column>
        <el-table-column prop="name" label="姓名" width="150"> </el-table-column>
        <el-table-column prop="operateTime" label="操作时间" width="170"> </el-table-column>
        <el-table-column prop="operateDesc" label="操作描述" width="200"> </el-table-column>
        <el-table-column prop="ipv4" label="IPv4" width="150"> </el-table-column>
        <el-table-column prop="method" label="Method" width="150"> </el-table-column>
        <el-table-column prop="url" label="URL" min-width="150" width="auto"> </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="$config.defaultPageSizeOpts"
        :page-size="size"
        layout="total, sizes, prev, pager, next"
        :total="data.total">
      </el-pagination>
    </div>
    <UserRef :visible="userRefVisible"
             @on-close="userRefVisible=false"
             @on-select="selectUser"></UserRef>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import UserRef from '@/components/ref/UserRef'

export default {
  name: 'OperateLog',
  components: { UserRef },
  data() {
    return {
      data: {},
      params: {},
      form: {},
      current: 1,
      size: 10,
      loading: false,
      userRefVisible: false
    }
  },
  methods: {
    ...mapActions(['GetOperateLogPage']),
    search() {
      this.params.current = this.current
      this.params.size = this.size
      this.loading = true
      this.GetOperateLogPage(this.params).then(res => {
        this.loading = false
        if (res) {
          this.data = res
        }
      }).catch(() => {
        this.loading = false
      })
    },
    reset() {
      this.params = {}
      this.current = 1
    },
    searchByCondition() {
      this.current = 1
      this.search()
    },
    handleSizeChange(val) {
      this.size = val
      this.search()
    },
    handleCurrentChange(val) {
      this.current = val
      this.search()
    },
    selectUser(val) {
      this.params.userId = val.id
      this.params.employeeName = val.employeeName
      this.userRefVisible = false
    }
  },
  mounted() {
    this.search()
  }
}
</script>

<style lang="less" scoped>
  .search {
    .search-item {
      width: 200px;
    }
  }
  .operate {
    float: right;
    operate-item {
      padding: 0 10px;
    }
  }
</style>
